<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Vue-点</title>
        <!--引入第三方的jquery脚本库-->
        <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
        <style type="text/css">
            #main {
                margin: 0 0;
                width: 100%;
                height: 100vh;
            }
            #map {
                height: 100vh;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <mapgis-web-map
                id="map"
                :map-style="mapStyle"
                :zoom="mapZoom"
                :center="outerCenter"
                :crs="mapCrs"
                v-on:load="handleMapLoad"
            >
                <mapgis-ogc-wmts-layer
                    :layer-id="layerWmtsId"
                    :source-id="sourceWmtsId"
                    :base-url="wmtsurl"
                    :tile-matrix-set="tileMatrixSet"
                    :wmts-layer="layer"
                    :format="format"
                    :token="token">
                </mapgis-ogc-wmts-layer>
                <mapgis-vector-layer
                    :layer="layerVector"
                    :layer-id="layerVectorId"
                    :source="sourceVector"
                    :source-id="sourceVectorId">
                </mapgis-vector-layer>
                <mapgis-vector-layer
                     :layer="layerSymbol"
                     :layer-id="layerSymbolId"
                     :source="sourceSymbol"
                     :source-id="sourceSymbolId">
                </mapgis-vector-layer>
            </mapgis-web-map>
        </div>
        <script>
            var GeoPoints = {
                type: 'FeatureCollection',
                features: [
                    {
                        type: 'Feature',
                        properties: {
                            name: '中国地质大学（武汉）'
                        },
                        geometry: {
                            type: 'Point',
                            coordinates: [114.39333915710448, 30.523341197001688]
                        }
                    },
                    {
                        type: 'Feature',
                        properties: {
                            name: '中地数码科技有限公司'
                        },
                        geometry: {
                            type: 'Point',
                            coordinates: [114.40078496932983, 30.467817543842873]
                        }
                    }
                ]
            };

            new Vue({
                el: '#app',
                data() {
                    return {
                        mapStyle: {
                            version: 8, //设置版本号，一定要设置
                            sources: {}, //添加来源
                            layers: [], //设置加载并显示来源的图层信息
                            //特别注意，这里是字体库，下面的sprite才是样式库
                            glyphs: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/fonts/{fontstack}/{range}.pbf',
                            //特别注意，这里是真正的图片样式库
                            sprite: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/sprite'
                        }, // 地图样式
                        mapZoom: 11, // 地图初始化级数
                        outerCenter: [114.39960479736327, 30.495722001885323], // 地图显示中心
                        mapCrs: 'EPSG:4326',

                        layerWmtsId: 'ogcwmts_layer_id',
                        sourceWmtsId: 'ogcwmts_source_id',
                        wmtsurl: 'http://t0.tianditu.gov.cn/img_c/wmts',
                        layer:"img",
                        tileMatrixSet:"c",
                        format:"tiles",
                        token: {
                            key: 'tk',
                            value: 'f5347cab4b28410a6e8ba5143e3d5a35'
                        },

                        sourceVectorId: 'vector_source_id',
                        layerVectorId: 'vector_layer_id',
                        sourceVector: {
                            type: 'geojson',
                            data: GeoPoints
                        },
                        layerVector: {
                            type: 'circle',
                            source: 'vector_source_id', //必须和上面的vector_source_id一致
                            // filter: ['==', 'name', '中国地质大学（武汉）'], //关键点：name对应geojson中的属性字段
                            layout: {
                                visibility: 'visible' //visible/none
                            },
                            paint: {
                                'circle-radius': 15, //半径
                                'circle-color': '#202', //颜色
                                'circle-opacity': 0.8, //透明度
                                'circle-stroke-width': 5, //轮廓线宽度
                                'circle-stroke-color': '#0000FF', //轮廓线颜色
                                'circle-stroke-opacity': 0.7 //轮廓线透明度
                                //"circle-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
                            }
                        },
                        sourceSymbolId: 'symbol_source_id',
                        layerSymbolId: 'symbol_layer_id',
                        sourceSymbol: {
                            type: 'geojson',
                            data: GeoPoints
                        },
                        layerSymbol: {
                            type: 'symbol',
                            source: 'symbol_source_id', //必须和上面的vector_source_id一致
                            layout: {
                                'text-field': '{name}', //这里一定要用{}将属性字段名包括进来！！！！！
                                'text-font': ['微软雅黑', '微软雅黑'],
                                'text-size': 20,
                                'text-offset': [7, 0] //为了照顾上面的图标，需要将文本右移
                            },
                            paint: {
                                'text-opacity': 0.9, //文本透明度
                                'text-color': '#202', //文本颜色
                                'text-halo-color': '#FFF', //文本光晕颜色
                                'text-halo-width': 2, //文本光晕宽度
                                'text-halo-blur': 1 //文本光晕模糊度
                            }
                        }
                    };
                },
                methods: {
                    handleMapLoad(payload) {
                        let map = payload.map;
                    }
                }
            });
        </script>
    </body>
</html>
